<template>
    <div class="swiper-container">
        <el-carousel trigger="click" :autoplay="false">
            <el-carousel-item>
                <div class="swiper1">
                    <div class="w1200">
                        <div class="private-header">
                            <div class="private-header-type">便捷·安全·省心</div>
                            <div class="private-header-title">智慧驾校管理SaaS平台</div>
                            <div class="private-header-desc">全场景数字化运营管理，全面赋能驾校降本增效</div>
                            <div class="private-button">
                                <div class="download-button cursor" @click="showConsult = true">立即咨询</div>
                                <div class="buy-button" @click="toFreeSignup">免费试用</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="swiper2">
                    <div class="w1200">
                        <div class="private-header">
                            <div class="private-header-type">便捷·安全·省心</div>
                            <div class="private-header-title">专业的驾培行业解决方案</div>
                            <div class="private-header-desc">12年行业服务经验，我们懂您真正的需求</div>
                            <div class="private-button">
                                <div class="download-button cursor" @click="showConsult = true">立即咨询</div>
                                <div class="buy-button" @click="toFreeSignup">免费试用</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>

    <div class="promotion-section">
        <div class="promotion-item bg1">
            <div class="promotion-title">极简部署，快速启动</div>
            <div class="promotion-desc">Saas部署，助您快速开启驾校信息化管理</div>
            <div class="promotion-action" @click="showConsult = true">
                <div class="marR10">免费试用</div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>

        <div class="promotion-item bg2">
            <div class="promotion-title">全程支持，使用无忧</div>
            <div class="promotion-desc">全程陪跑，提供专属服务通道与全程支持</div>
            <div class="promotion-action" @click="showConsult = true">
                <div class="marR10">免费试用</div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>

        <div class="promotion-item bg3">
            <div class="promotion-title">专属指导，轻松上手</div>
            <div class="promotion-desc">3天内指导掌握核心操作，后台页面DIY</div>
            <div class="promotion-action" @click="showConsult = true">
                <div class="marR10">免费试用</div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>

        <div class="promotion-item bg4">
            <div class="promotion-title">响应迅速，保障稳定</div>
            <div class="promotion-desc">7*24小时售后问题快速响应</div>
            <div class="promotion-action" @click="showConsult = true">
                <div class="marR10">免费试用</div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import consult from '@/components/consult.vue';

const showConsult = ref(false);

const toFreeSignup = () => {
    window.open('https://www.lutongjiakao.com/admin/#/register')
}
</script>

<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.swiper-container {
    width: 100%;
    height: rem(645);
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.w1200 {
    width: rem(900);
}

:deep(.el-carousel__container) {
    height: rem(645);

    .img-swiper {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper1,
    .swiper2 {
        background-repeat: no-repeat;
        height: 100%;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .private-header {
            /* 垂直居中内容 */
            display: flex;
            flex-direction: column;
            // justify-content: center;
            margin-top: rem(200);
            height: rem(645);
        }

        .private-header-type {
            width: rem(97);
            font-weight: 500;
            font-size: rem(13);
            background: linear-gradient(90deg, rgb(17, 200, 113) 0%, rgb(66, 175, 215) 100%) text;
            color: transparent;
        }

        .private-header-title {
            color: rgb(33, 33, 33);
            margin: rem(10) 0;
            font-size: rem(36);
            font-weight: 700;
        }

        .private-header-desc {
            font-size: rem(12);
            color: rgb(89, 89, 89);
            margin-top: rem(10);
        }

        .private-button {
            display: flex;
            align-items: center;
            gap: rem(20);
            margin-top: rem(30);
        }

        .download-button,
        .buy-button {
            width: rem(108);
            height: rem(33);
            font-size: rem(11);
            border-radius: rem(4);
            text-align: center;
            line-height: rem(33);
            cursor: pointer;
        }

        .download-button {
            color: rgb(255, 255, 255);
            background: rgb(17, 200, 113);
        }

        .buy-button {
            border: 1px solid rgb(17, 200, 113);
            color: rgb(17, 200, 113);
        }
    }

    .swiper1 {
        background-image: url('https://image.lutongjiakao.com/system/abaddff2aa5044139f631e8b68cb2626.png');
    }

    .swiper2 {
        background-image: url('https://image.lutongjiakao.com/system/d45b4821b1be4845a9e141a2643725a1.png');
    }
}

// 促销信息区块样式
.promotion-section {
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: #fff;
    height: rem(120);
}

.promotion-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    max-width: rem(230);
    padding: rem(20);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        .promotion-title {
            color: rgb(17, 200, 113);
        }

        .promotion-action {
            padding: rem(5) rem(20);
            color: #fff;
            background: linear-gradient(90deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
        }
    }
}

.bg1 {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/28af684ad8d348e49d2d6297cf922f35.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.bg2 {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/6f554d2e6ed049279bfc2b801805fffe.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.bg3 {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/09133007de2c4cc18da8a3ff3a2119d4.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.bg4 {
    &:hover {
        background-image: url('https://image.lutongjiakao.com/system/9a977f3ab7b741bc903028bd79bacb35.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.promotion-title {
    font-size: rem(17);
    font-weight: 700;
    color: #333;
    margin-bottom: rem(8);
    line-height: 1.4;
    transition: color 0.3s ease; // 添加颜色过渡动画
}

.promotion-desc {
    font-size: rem(10);
    color: #666;
    margin-bottom: rem(12);
    line-height: 1.3;
}

.promotion-action {
    font-size: rem(10);
    color: rgb(17, 200, 113);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    border-radius: rem(24);
    padding: rem(5) 0;
    transition: 0.3s;
}

.marR10 {
    margin-right: rem(10);
}
</style>